<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<link rel="stylesheet" type="text/css"
	href="view/bootstrap-3.3.5/css/bootstrap.css" />
<link rel="stylesheet" type="text/css"
	href="view/bootstrapvalidator/css/bootstrapValidator.css" />
<script charset="utf-8" src="view/jquery/jquery-1.10.2.min.js"></script>
<script charset="utf-8" src="view/bootstrap-3.3.5/js/bootstrap.js"></script>
<script charset="utf-8"
	src="view/bootstrapvalidator/js/bootstrapValidator.js"></script>
<body>
	<div class="container">
		<div id="alertmsg" class="alert alert-dander"
			style="background-color: #66FFFF; color: red" hidden="true"></div>
		<table class="table table-spripad table-hover">
			<caption>角色管理</caption>
			<thead>
				<tr>
					<th>角色编号</th>
					<th>角色名称</th>
					<th>角色描述</th>
					<th colspan="3">角色操作</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${requestScope.rols}" var="r">
					<tr class="active" ondblclick="info(${r.oid})" id="tr${r.oid}">
						<td>${r.oid}</td>
						<td>${r.roleName}</td>
						<td>${r.description}</td>
						<td><a type="button" href="#" onclick="member(${r.oid})"
							data-toggle="modal" data-target="#modal2">添加成员</a></td>
						<div class="modal fade" id="modal2" tabindex="-1" role="dialog"
							aria-labelledby="mymodallabel" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal"
											aria-hidden="true">&times;</button>
										<h4 class="modal-title" id="mymodallabel">
											选择员工 <select id="sele">
												<option value="">请选择</option>
												<c:forEach items="${depts}" var="d">
													<option value="${d.oid}">${d.deptName}</option>
												</c:forEach>
											</select>
										</h4>
									</div>
									<div class="modal-body">
										<div class="row">
											<div class="panel panel-danger">
												<form role="form" class="form-horizontal" id="insertform"
													action="juese/insertRole_emps" method="post">
													<input type="hidden" name="roid" id="roid"> 
													<input type="hidden" name="eids" id="eids">
													<div class="form-group">
														<div class="row">
															<div class="col-md-4 col-md-offset-1">
																<select id="s1" multiple
																	style="width: 150px; height: 150px;">

																</select>
															</div>
															<div class="col-md-2">
																<br>
																<button type="button" style="width: 37px" id="btn1">&gt;&gt;&gt;</button>
																<br>
																<button type="button" style="width: 37px" id="btn2">&lt;&lt;&lt;</button>
																<br>
																<button type="button" style="width: 37px" id="btn3">&gt;</button>
																<br>
																<button type="button" style="width: 37px" id="btn4">&lt;</button>
															</div>
															<div class="col-md-3">
																<select id="s2" multiple
																	style="width: 150px; height: 150px;">

																</select>
															</div>
														</div>
													</div>
												</form>
											</div>
										</div>
									</div>
									<div class="modal-footter" style="text-align: right;">
										<button type="button" onclick="toAdd()" class="btn btn-default">提交</button>
										<button type="button" class="btn btn-primary"
											data-dismiss="modal">关闭</button>
									</div>
								</div>
							</div>
						</div>
						<td><a type="button" href="juese/selectAllPower?oid=${r.oid}">设置权限</a></td>
						<td><a type="button" href="juese/deleteJueSe?oid=${r.oid}">删除角色</a></td>
					</tr>

					<tr style="display: none">
						<td colspan="100%">
							<table class="table table-bordered table-hover">
								<thead>
									<tr style="background-color: #66FFFF">
										<th>员工姓名</th>
										<th>员工部门</th>
										<th>员工性别</th>
										<th>员工生日</th>
										<th>毕业学校</th>
										<th>员工专业</th>
										<th>员工学历</th>
										<th>联系方式</th>
										<th>员工状态</th>
									</tr>
								</thead>
								<tbody>
									<c:forEach items="${r.emps}" var="e">
										<tr class="active">
											<td>${e.empName}</td>
											<td>${e.dept.deptName}</td>
											<td>${e.sex=="1"?"男":e.sex=="0"?"女":""}</td>
											<td>${e.birthday}</td>
											<td>${e.school}</td>
											<td>${e.major}</td>
											<td>${e.degree}</td>
											<td>${e.phone}</td>
											<td>${e.state=="0"?"被删除":e.state=="1"?"正在使用":""}</td>
										</tr>
									</c:forEach>
								</tbody>
							</table>
						</td>
					</tr>
					<br>
					<tr style="display: none">
						<td colspan="100%">
							<table class="table table-spripad table-hover">
								<thead>
									<tr style="background-color: #66FFFF">
										<th>员工权限</th>
									</tr>
								</thead>
								<tbody>
									<c:forEach items="${r.functions}" var="f">
										<tr class="active">
											<td>${f.functionName}</td>
										</tr>
									</c:forEach>
								</tbody>
							</table>
						</td>
					</tr>
				</c:forEach>

				<tr>
					<td colspan="100%">
						<button class="btn btn-primary btn-xs" data-toggle="modal"
							data-target="#mymodal">新建角色</button>
						<div class="modal fade" id="mymodal" tabindex="-1" role="dialog"
							aria-labelledby="mymodallabel" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal"
											aria-hidden="true">&times;</button>
										<h4 class="modal-title" id="mymodallabel">角色添加</h4>
									</div>
									<div class="modal-body">
										<div class="row">
											<div class="panel panel-danger">
												<form role="form" class="form-horizontal" id="myform"
													action="juese/insertJueSe" method="post">
													<div class="form-group">
														<label for="roleName" class="col-md-2 control-label">角色名称</label>
														<div class="col-md-4">
															<input type="text" class="form-control" id="roleName"
																name="roleName" placeholder="请输入角色名称">
														</div>
													</div>
													<br>
													<div class="form-group">
														<label for="description" class="col-md-2 control-label">角色描述</label>
														<div class="col-md-7">
															<textarea rows="4" name="description"
																class="form-control" placeholder="请输入角色名称"
																style="resize: none"></textarea>
														</div>
													</div>
												</form>
											</div>
										</div>
									</div>
									<div class="modal-footter" style="text-align: right;">
										<button type="button" id="btn" class="btn btn-default">提交</button>
										<button type="reset" id="reset" class="btn btn-primary"
											data-dismiss="modal">关闭</button>
									</div>
								</div>
							</div>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
<script type="text/javascript">
	$(document).ready(function() {

		var str = "${requestScope.str}";
		if (str != null && str != "") {
			$("#alertmsg").text(str);
			$("#alertmsg").show();
			$("#alertmsg").delay(3000).hide(0);
		}

		$('#myform').bootstrapValidator({
			message : 'this value is not valid',
			feedbackIcons : {
				valid : 'glyphicon glyphicon-ok',
				invalid : 'glyphicon glyphicon-remove',
				validating : 'glyphicon glyphicon-refresh'
			},
			fields : {
				roleName : {

					validators : {

						notEmpty : {/*非空提示*/
							message : '添加角色不能为空'
						}
					}

				},
				description : {
					validators : {
						stringLength : {/*长度提示*/
							min : 0,
							max : 100,
							message : '角色描述长度必须在0-100位之间'
						}
					}
				},

			},

			submitHandler : function(validator, form, submitButton) {
				validator.defaultsubmit();
			}
		});

		//手动验证表格提交
		$("#btn").click(function() {
			$('#myform').data("bootstrapValidator").validate();
			if ($('#myform').data("bootstrapValidator").isValid()) {
				$("#myform")[0].submit();
			}
		});

		$("#reset").click(function() {
			$('#myform').data("bootstrapValidator").resetForm();
		});
		
		//给部门下拉框添加点击事件
		$("#sele").change(
				function() {
					//得到当前选中部门和右边下拉框中的已有员工
					$("#s1").empty();
					var oid = $(this).val();
					var eids = new Array(); //定义数组
					$("#s2 option").each(function() { //遍历所有option
						var txt = $(this).text(); //获取option值
						if (txt != '') {
							eids.push(txt); //添加到数组中
						}
					});
					//Json请求通过角色ID查询该角色下所有成员
					$.post("juese/selectByIdEmp", {
						oid : oid
					}, function(emps) {
						for (i = 0; i < emps.length; i++) {
							var emp = emps[i];
							var b = true; //标识
							//循环判断当前部门下所有员工与右边框中是否相同（如果是则改变标识，通过判断标识确定是否追加）
							for (j = 0; j < eids.length; j++) {
								if (eids[j] == emp.empName) {
									b = false;
								}
							}
							if (b) {
								$("#s1").append(
										"<option value=" + emp.oid + ">"
												+ emp.empName
												+ "</option>");
							}
						}
					}, "json");
				});

	});

	$("#btn1").click(function() {
		$("#s2").append($("#s1 option"))
	});

	$("#btn2").click(function() {
		$("#s1").append($("#s2 option"))
	});

	$("#btn3").click(function() {
		$("#s2").append($("#s1 option:selected"))
	});

	$("#btn4").click(function() {
		$("#s1").append($("#s2 option:selected"))
	});

			function info(oid) {
				if ($("#tr"+oid).next().css("display") == 'none' && $("#tr"+oid).next().next().css("display") == 'none') {
					$("#tr"+oid).next().css("display", 'table-row');
					$("#tr"+oid).next().next().css("display", 'table-row');
				} else {
					$("#tr"+oid).next().css("display", 'none');
					$("#tr"+oid).next().next().css("display", 'none');
				}
			}

	//点击成员管理超链接进入此方法
	function member(roid) {
		//将角色ID放在隐藏域，并且清空左边和右边多选下拉框
		$("#roid").val(roid);
		$("#s2").empty();
		$("#s1").empty();
		$("#sele").val("");
		//JSON请求查询该角色下已有员工追加在右边下拉框
		$.getJSON("juese/selectRight", {
			oid : roid
		}, function(emps) {
			for (i = 0; i < emps.length; i++) {
				var e = emps[i];
				$("#s2").append(
						"<option value=" + e.oid + ">" + e.empName
								+ "</option>");
			}
		});
	}

	function toAdd() {
		var roid = $("#roid").val();
		var eids = "";
		$("#s2 option").each(function() { //遍历所有option
			var txt = $(this).val(); //获取option值
			eids = eids + ":" + txt;
		});
		var roid = $("#eids").val(eids.slice(1));
		$("#insertform")[0].submit();
	}
</script>
</html>